<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				position: absolute;
				left: 0;
				width: 100px;
				height: 100px;
				background-color: #00BFFF;
			}
		</style>
	</head>
	<body>
		<div>

		</div>
		<script type="text/javascript">
			//动画原理
			//1.获得盒子当前位置
			//2.让盒子在当前位置加上一个移动距离
			//3.利用定时器不断重复这个操作
			//4.加一个结束定时器的事件
			//5.注意此元素需要添加定位,才能使用element.style.left
			var div = document.querySelector('div');

			var timer = setInterval(function() {
				if (div.offsetLeft <= 500) {
					div.style.left = div.offsetLeft + 3 + "px";
				} else {
					//停止动画,停止定时器
					clearInterval(timer);
				}
			}, 30)
		</script>
	</body>
</html>
